作者：风一样的骨头gg | 来源：互联网 | 2023-09-18 18:05
篇首语：本文由编程笔记#小编为大家整理，主要介绍了前端添加水印效果攻略vue和原生js添加方式相关的知识，希望对你有一定的参考价值。
&＃x1f48c; 作者简介
-
&＃x1f4d6; 个人介绍&＃xff1a;小伙伴们&＃xff0c;大家好&＃xff01;我是水香木鱼&＃xff0c;【前端领域创作者】&＃x1f61c;
-
&＃x1f4dc; CSDN主页&＃xff1a;水香木鱼
-
&＃x1f4d1; 个人博客&＃xff1a;陈春波
-
&＃x1f3a8; 系列专栏&＃xff1a;后台管理系统
-
&＃x1f339; 一键四连&＃xff1a;关注&＃x1f48b;&＃43;点赞&＃x1f44d;&＃43;收藏⭐&＃43;留言&＃x1f4dd;
-
&＃x1f4e2; 人生箴言&＃xff1a;即使没有万全准备&＃xff0c;也要勇敢迈出第一步。
期待已久的添加水印方法它来啦!一&＃x1f680; 喜欢原生js和vue的你,看过来吧。&＃x1f447;
一、&＃x1f6f8;原生JS 添加水印方法
1、创建 warterMarkJS.js文件
2、页面内使用
注意&＃xff1a;全局引用的话&＃xff0c;需要在主页面内引入
DOCTYPE html>
<html lang&＃61;"en">
<head>
<meta charset&＃61;"UTF-8">
<meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge">
<meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">
<title>原生JS添加水印攻略title>
<script src&＃61;"./js/warterMarkJS.js">script>
<style>
style>
head>
<body style&＃61;"height: 600px">
<div class&＃61;"elementdiv">div>
<script>
watermark(&＃39;水香木鱼&＃39;, "SXMY")
script>
body>
html>
3、原生JS源码warterMarkJS.js
function watermark(firstNode, secondNode)
var container &＃61; document.getElementsByClassName(&＃39;elementdiv&＃39;)
if (container.length > 0)
for (var i &＃61; container.length - 1; i >&＃61; 0; i--)
document.body.removeChild(container[i])
var elementWidth &＃61; document.documentElement.offsetWidth;
var elementHeight &＃61; document.documentElement.offsetHeight;
var intervalWidth &＃61; 340;
var intervalheight &＃61; 200;
var crosswise &＃61; (elementWidth - 60 - 200) / intervalWidth;
var lengthways &＃61; (elementHeight - 60 - 80) / intervalheight;
var watermarkConfiguration &＃61;
watermarkFont: &＃39;微软雅黑&＃39;,
watermarkColor: &＃39;red&＃39;,
watermarkFontsize: &＃39;18px&＃39;,
watermarkTransparency: 0.15,
watermarkWidth: 230,
watermarkHeight: 100,
watermark_angle: 20
;
var _template &＃61; document.createDocumentFragment();
for (var i &＃61; 0; i < crosswise; i&＃43;&＃43;)
for (var j &＃61; 0; j < lengthways; j&＃43;&＃43;)
var xaxis &＃61; intervalWidth * i &＃43; 26;
var yaxis &＃61; intervalheight * j &＃43; 26;
var watermarkDiv &＃61; document.createElement(&＃39;div&＃39;);
watermarkDiv.id &＃61; &＃39;watermarkDiv&＃39; &＃43; i &＃43; j;
watermarkDiv.className &＃61; &＃39;watermarkDiv&＃39;;
var spanFirst &＃61; document.createElement(&＃39;div&＃39;);
var spanSecond &＃61; document.createElement(&＃39;div&＃39;);
spanFirst.appendChild(document.createTextNode(firstNode));
spanSecond.appendChild(document.createTextNode(secondNode));
watermarkDiv.appendChild(spanFirst);
watermarkDiv.appendChild(spanSecond);
watermarkDiv.style.webkitTransform &＃61; "rotate(-" &＃43; watermarkConfiguration.watermark_angle &＃43; "deg)";
watermarkDiv.style.MozTransform &＃61; "rotate(-" &＃43; watermarkConfiguration.watermark_angle &＃43; "deg)";
watermarkDiv.style.msTransform &＃61; "rotate(-" &＃43; watermarkConfiguration.watermark_angle &＃43; "deg)";
watermarkDiv.style.OTransform &＃61; "rotate(-" &＃43; watermarkConfiguration.watermark_angle &＃43; "deg)";
watermarkDiv.style.transform &＃61; "rotate(-" &＃43; watermarkConfiguration.watermark_angle &＃43; "deg)";
watermarkDiv.style.opacity &＃61; watermarkConfiguration.watermarkTransparency;
watermarkDiv.style.fontSize &＃61; watermarkConfiguration.watermarkFontsize;
watermarkDiv.style.fontFamily &＃61; watermarkConfiguration.watermarkFont;
watermarkDiv.style.color &＃61; watermarkConfiguration.watermarkColor;
watermarkDiv.style.width &＃61; watermarkConfiguration.watermarkWidth &＃43; &＃39;px&＃39;;
watermarkDiv.style.height &＃61; watermarkConfiguration.watermarkHeight &＃43; &＃39;px&＃39;;
watermarkDiv.style.visibility &＃61; "";
watermarkDiv.style.position &＃61; "absolute";
watermarkDiv.style.left &＃61; xaxis &＃43; &＃39;px&＃39;;
watermarkDiv.style.top &＃61; yaxis &＃43; &＃39;px&＃39;;
watermarkDiv.style.overflow &＃61; "hidden";
watermarkDiv.style.zIndex &＃61; "9999";
watermarkDiv.style.pointerEvents &＃61; &＃39;none&＃39;;
watermarkDiv.style.textAlign &＃61; "center";
watermarkDiv.style.display &＃61; "block";
_template.appendChild(watermarkDiv);
document.body.appendChild(_template);
二、&＃x1f6f0; VUE 添加水印方法
1、创建 warterMarkVUE.js文件
2、全局使用水印
在App.vue中引用
<script>
import Watermark from "./views/advanced/js/warterMarkVUE";
export default
mounted()
Watermark.set("水香木鱼");
,
</script>
3、局部使用水印
局部引用&＃xff0c;把warterMarkVUE.js文件引用到单页面内即可使用,木鱼在这里就不过多的阐述了。【和全局引用一样&＃xff0c;只不过是引用的页面不一样】一个是全局显示、一个是在单页面内显示
4、VUE源码 warterMarkVUE.js
let watermark &＃61;
let setWatermark &＃61; (str) &＃61;>
let id &＃61; &＃39;1.23452384164.123412415&＃39;
if (document.getElementById(id) !&＃61;&＃61; null)
document.body.removeChild(document.getElementById(id))
let createCanvas &＃61; document.createElement(&＃39;canvas&＃39;)
createCanvas.width &＃61; 250
createCanvas.height &＃61; 220
let Context2D &＃61; createCanvas.getContext(&＃39;2d&＃39;)
Context2D.rotate(-20 * Math.PI / 100)
Context2D.font &＃61; &＃39;20px Vedana&＃39;
Context2D.fillStyle &＃61; &＃39;#fff&＃39;
Context2D.textAlign &＃61; &＃39;center&＃39;
Context2D.textBaseline &＃61; &＃39;Middle&＃39;
Context2D.fillText(str, createCanvas.width / 3, createCanvas.height / 2)
let createDiv &＃61; document.createElement(&＃39;div&＃39;)
createDiv.id &＃61; id
createDiv.style.pointerEvents &＃61; &＃39;none&＃39;
createDiv.style.top &＃61; &＃39;70px&＃39;
createDiv.style.left &＃61; &＃39;0px&＃39;
createDiv.style.opacity &＃61; &＃39;0.15&＃39;
createDiv.style.position &＃61; &＃39;fixed&＃39;
createDiv.style.zIndex &＃61; &＃39;100000&＃39;
createDiv.style.width &＃61; document.documentElement.clientWidth - 100 &＃43; &＃39;px&＃39;
createDiv.style.height &＃61; document.documentElement.clientHeight - 100 &＃43; &＃39;px&＃39;
createDiv.style.background &＃61; &＃39;url(&＃39; &＃43; createCanvas.toDataURL(&＃39;image/png&＃39;) &＃43; &＃39;) left top repeat&＃39;
document.body.appendChild(createDiv)
return id
watermark.set &＃61; (str) &＃61;>
let id &＃61; setWatermark(str)
setInterval(() &＃61;>
if (document.getElementById(id) &＃61;&＃61;&＃61; null)
id &＃61; setWatermark(str)
, 500)
window.onresize &＃61; () &＃61;>
setWatermark(str)
export default watermark
&＃x1f4d6; 博主致谢
感谢大家阅读到结尾&＃xff0c;本次的文章就分享到这里&＃xff0c;总结了【vue添加水印和原生js水印的攻略】&＃xff0c;希望可以帮到大家&＃xff0c;谢谢。
如果您觉得这篇文章有帮助到您的的话不妨【关注&＃43;点赞&＃43;收藏&＃43;评论&＃43;转发 】支持一下哟~~&＃x1f61b;您的支持就是我更新的最大动力。&＃x1f447;&＃x1f447;&＃x1f447;&＃x1f447;&＃x1f447;&＃x1f447;
&＃x1f6e9;往期精彩&＃xff1a;
vue实现隐藏浏览器右侧滚动条功能
前端实现el-pagination分页的两种业务场景,你知道吗&＃xff1f;
前端开发&＃xff1a;颜色代码速查表【英文颜色、HEX格式、RGB格式】
前端实现div标签p标签等吸顶效果【Vue&＃43;原生JS组合写法】
一文图解前端WebSocket 实时通信
京公网安备 11010802041100号